<template >
  <div >
    <div id="header">
      <div class="header-left" ><span><van-icon name="arrow-left" size="22px" /></span></div>
      <div class="header-input"><van-search :value="this.value"  background="#00bcd4" placeholder="请输入搜索关键词" /></div>
      <div class="header-right">城市<span><van-icon name="location" size="18px" /></span></div>
    </div>
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" height="170px" width="100%" type="scale-down"/>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>

export default {
    name:'indexhead',
    data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      value:''
    }
  }
 
}
</script>
<style scoped>
 #header{
   position: relative;
  display:flex;
  line-height:43px;
  background-color:#00bcd4;
  color:#fff;


} 
.header-left span {
 float:left;
 text-align:center;
 margin-top:6px;


}
.header-input{
  flex:1;
  margin-top:-3px;
  margin-left:11px;
  height:31px;
  line-height:31px;
  background-color:#fff;
  border-radius:5px;
  color:#ccc;



}
.header-right{
  width:80px;
  float:right;
  text-align:center;
}
.banner {
position: absolute;
margin: auto;
right: 0;
left: 0;
border-radius: 8px;
overflow: hidden;
}

</style>
